<!-- 手签协议 -->
<template>
  <div id="depositMgmtRefund">
    <c-title :hide="false" text="押金管理"></c-title>
    <van-tabs v-model="activeName" @click="handleClick" sticky :ellipsis="false" offset-top="40" color="var(--themeBaseColor)" line-width="20px">
      <van-tab :title="items.name" v-for="(items, ind) in titleArr" :key="ind">
        <div class="list" v-if="dataList[ind] && !fun.isTextEmpty(dataList[ind].list)">
          <div class="list-child" v-for="(item, index) in dataList[ind].list" :key="index">
            <div class="flex-a-c flex-j-sb">
              <div class="f-14">订单号：{{ item.order_sn }}</div>
              <div class="f-12 themeColor">{{ item.status_name }}</div>
            </div>
            <div class="flex margin-top-6" v-if="item.has_one_deposit_goods">
              <img class="wh-60" :src="item.has_one_deposit_goods.goods_thumb" alt="" />
              <div class="f-grow-1 margin-left-10 flex-column flex-j-sb">
                <div class="f-15 line-clamp-2 color-000000">{{ item.has_one_deposit_goods.name }}</div>
                <div class="flex-a-c flex-j-sb">
                  <div class="flex-a-c f-16"><div class="f-11">￥</div>{{ item.has_one_deposit_goods.deposit }}</div>
                  <!-- <div class="f-12">数量：x</div> -->
                </div>
              </div>

            </div>
            <div class="margin-top-6 flex" style="flex-direction: row-reverse;">
              <van-button @click.stop="publicMessage(item.id,btn)" v-for="(btn,bi) in item.button_models" color="var(--themeBaseColor)" :key="bi" type="primary" size="small" round style="padding: 0 14px;">
                {{ btn.name }}
              </van-button>
            </div>
          </div>
        </div>
        <van-empty v-if="!$store.state.isloadding && fun.isTextEmpty(dataList[ind].list)" description="暂无数据" />
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { scrollMixin } from "utils/mixin";
export default {
  mixins: [scrollMixin], //加载更多
  data() {
    return {
      keyword: "",
      activeName: 0,
      dataList: [],
      titleArr: [],
      isLoadMore: true,

      loading: false
    };
  },

  activated() {},
  created() {
    this.init();
  },

  components: {},

  computed: {},

  mounted() {},

  methods: {
    toUrl(name, params = {}, query = {}) {
      this.$router.push(this.fun.getUrl(name, params, query));
    },
    init() {
      this.dataList = [];
      this.titleArr = [
        { id: 0, name: "全部" },
        { id: 1, name: "在用押金" },
        { id: 2, name: "待确认还桶" },
        { id: 3, name: "待退还" },
        { id: -1, name: "已退还" }
      ];
      this.isLoadMore = true;
      this.setNewArr();
    },
    setNewArr() {
      this.titleArr.forEach((val, index) => {
        this.dataList.push({
          isLoadMore: true,
          loading: false,
          finished: false,
          page: 1,
          total_page: 0,
          list: []
        });
      });
      this.handleClick();
    },
    onLoad() {},
    onSearch() {
      this.dataList[this.activeName].list = [];
      this.dataList[this.activeName].page = 1;
      this.handleClick();
    },
    handleClick() {
      // if (!this.fun.isTextEmpty(this.dataList[this.activeName].list)) {
      //   this.isLoadMore = this.dataList[this.activeName].isLoadMore;
      //   return;
      // }
      $http
        .get("plugin.deposit-mgmt.frontend.deposit.index", { page: 1, "search[title]": this.keyword, status: this.activeName }, ".")
        .then(response => {
          if (response.result === 1) {
            this.isLoadMore = true;
            this.dataList[this.activeName].isLoadMore = true;
            this.dataList[this.activeName].page = 1;
            this.dataList[this.activeName].total_page = response.data.last_page;
            this.$set(this.dataList[this.activeName], "list", response.data.data);
          } else {
            this.$dialog.alert({ message: response.msg });
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    //获取更多数据
    getMoreData() {
      const that = this;
      that.dataList[that.activeName].isLoadMore = false;
      that.isLoadMore = false; // 防止多次请求分页数据
      if (that.dataList[that.activeName].page >= that.dataList[that.activeName].total_page) {
        return;
      } else {
        let _json = {
          "search[title]": this.keyword,
          status: this.activeName
        };
        that.dataList[that.activeName].page = that.dataList[that.activeName].page + 1;
        _json.page = that.dataList[that.activeName].page;

        $http.get("plugin.deposit-mgmt.frontend.deposit.index", _json, "加载中").then(
          response => {
            that.isLoadMore = true;
            that.dataList[that.activeName].isLoadMore = true;
            if (response.result === 1) {
              var myData = response.data.data;
              that.dataList[that.activeName].list = that.dataList[that.activeName].list.concat(myData); //数组拼接
            } else {
              that.dataList[that.activeName].page = that.dataList[that.activeName].page - 1;
              that.dataList[that.activeName].isLoadMore = false;
              that.isLoadMore = false;
            }
          },
          function(response) {
            // error callback
          }
        );
      }
    },

    publicMessage(id, btn, text) {
      let _text = text || btn.name;
      if (!btn.api) {
        return;
      }
      this.$dialog
        .confirm({ message: `确定${_text}?` })
        .then(() => {
          let json = {
            id: id
          };
          let urls = btn.api || "";
          $http.get(urls, json).then(
            (response)=> {
              this.$dialog.alert({ message: response.msg });
              if (response.result == 1) {
                this.onSearch();
              }
            },
            function(response) {
              console.log(response);
            }
          );
        })
        .catch(() => {});
    },
  }
};
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
#depositMgmtRefund {
  .list {
    padding: 0.875rem;

    .list-child {
      text-align: left;
      display: flex;
      flex-direction: column;
      background-color: #fff;
      border-radius: 0.5rem;
      overflow: hidden;
      margin-bottom: 0.75rem;
      padding: 0.875rem;
    }
    .wh-60 {
      width: 3.75rem;
      height: 3.75rem;
      display: block;
      border-radius: 0.5rem;
    }
  }
}
</style>
